<template>
	<view class="tm-sticky fulled" :class="[model]" :style="{
		top:model=='top'||model=='static'?`${top}px`:'auto',
		bottom:model=='bottom'?`${top}px`:'auto',
	}">
		<slot></slot>
	</view>
</template>

<script>
	/**
	 * 粘性布局
	 * @property {String|Number} top = [] 当悬浮时的的偏移量，当model=bottom时，为底部偏移量，单位px
	 * @property {String} model = [static|top|bottom] 固定的位置
	 * @example <tm-sticky ></tm-sticky>
	 */
	export default {
		name:'tm-sticky',
		props:{
			top:{
				type:String|Number,
				default:0
			},
			model:{
				type:String,
				default:'static',//static,top,bottom
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
.tm-sticky{
	&.static{
		position: sticky;
		position: -webkit-sticky;
	}
	&.top{
		position: fixed;
		top: 0;
		z-index: 40;
	}
	&.bottom{
		position: fixed;
		bottom: 0;
		z-index: 40;
	}
	
	z-index: 40;
}
</style>
